<template>
  <div>
    <Drawer
        v-model:visible="visible"
        :destroyOnClose="true"
        class="custom-class"
        placement="right"
        title="调用情况"
        width="50%"
    >
      <div class="md:flex bg-gray-100 rounded-2xl">
        <div class="md:w-2/2 md:h-2/2 md:mr-5 ml-10 my-10">
          <ChartCard
              :name="nameArray"
              :series="seriesArray"
              :x="xArray"
              class="md:h-105"
              title="调用情况"
          ></ChartCard>
        </div>
      </div>
      <div class="md:my-80">
        <Divider></Divider>
      </div>
      <div class="absolute bottom-10 right-8">
        <Button style="margin-right: 8px; font-weight: bolder" @click="onClose">取消</Button>
        <Button style="font-weight: bolder" type="primary" @click="onClose">确定</Button>
      </div>
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {Button, Divider, Drawer} from 'ant-design-vue';
import {getSingleDetail} from '/@/api/measurement-center/function-statistic/functionStatistic';
import ChartCard from '/@/views/measurement-center/function-statistic/component/chartCard.vue';

const visible = ref<boolean>(false);
const basicData = ref([]);
const xArray = ref([]);
const seriesArray = ref([]);
const nameArray = ref([]);
const openDrawer = async (params) => {
  basicData.value = await getSingleDetail(params);
  xArray.value = basicData.value.dateList;
  seriesArray.value = basicData.value.countsList;
  nameArray.value = basicData.value.tenantName;
  visible.value = true;
};
const onClose = () => {
  visible.value = false;
};
defineExpose({openDrawer})
</script>
